<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html {
            height: 3000px;
        }

        .fixed {
            position: fixed;
            right: 5px;
            top: 5px;
        }
    </style>
</head>

<body>
    <button class="open">打开百度</button>
    <button class="close">关闭百度</button>

    <div class="fixed">
        <button class="scrollBy">scrollBy</button>
        <button class="scrollTo">scrollTo</button>
    </div>

</body>
<script>
    // var zhang = {
    //     // 键值对
    //     name: "张三",  //属性
    //     age: 18,
    //     say: function () { // 方法
    //         console.log("hello");
    //     }
    // }

    // window相关的属性和方法
    // 属性
    // name      窗口的名称(只能是字符串类型,存储其他类型会隐式转字符串)
    // status    窗口的状态(只能是字符串类型,存储其他类型会隐式转字符串)
    // innerWidth  innerHeight  获取窗口的可视宽高 (包含滚动条 不包含控制台)
    // outerWidth  outerHeight  获取窗口的实际宽高 (包含滚动条 包含控制台)

    // console.log(window.innerWidth, window.innerHeight);
    // console.log(window.outerWidth, window.outerHeight);


    // 方法
    // window.open(url,name,窗口特性)  打开新的窗口 或  查找一个已命名的窗口
    // url 打开的地址
    // name 窗口的名称
    // 窗口特性  设置窗口的大小 位置

    // 返回值: 被打开的窗口的window

    // window.close()    关闭窗口(对应window关闭)


    // scrollBy(x,y) 相对于当前滚动条的位置 进行滚动  => 正值 相加 , 负值 相减
    // scrollTo(x,y) 将滚动直接移动至指定位置


    var openBtn = document.getElementsByClassName("open")[0];
    var closeBtn = document.getElementsByClassName("close")[0];
    var scrollByBtn = document.getElementsByClassName("scrollBy")[0];
    var scrollToBtn = document.getElementsByClassName("scrollTo")[0];
    console.log(openBtn);

    openBtn.onclick = function () {
        // window.open("https://www.baidu.com");
        // window.open("./05 年月日输入判断和计算.html");

        // window.open("https://www.baidu.com", "demo");

        var subWindow = window.open("https://www.baidu.com", "demo", "width=400px,height=400px,left=100px,top=200px");

        closeBtn.onclick = function () {
            subWindow.close();
        }
    }


    scrollByBtn.onclick = function () {
        scrollBy(0, 100)
        // scrollBy(0, -100)
    }


    scrollToBtn.onclick = function () {
        // scrollTo(0, 1000);
        scrollTo({
            left: 0,
            top: 1000,
            behavior: "smooth" // 平滑过渡
        });
    }






</script>

</html>